<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>编辑定时任务</title>
</head>
<style>
    *{font-size: 12px;}
    .tableDiv{width: 60vw; margin: 0 auto;}
    table tr td {border-bottom: 1px solid #cccccc;}
    table tr td input{display:block; min-width: 50vw;}
    .CodeMirror * {
      font-family: Arial, monospace;
      font-size: 16px;
    }
</style>
<div th:include="/common/codemirror :: codemirrorStyle"></div>
<body th:with="nowDate=${#dates.format(new java.util.Date().getTime(), 'yyyy-MM-dd')}">
<form th:method="POST" th:action="@{/admin/job/saveBaseJob}">
    <div th:if="${not #strings.isEmpty(job.jobId)}">
        <input type="hidden" name="jobId" th:value="${job.jobId}"/>
    </div>
    <div th:object="${job}" class="tableDiv">
        <table>
            <tr>
                <td><laber>任务名</laber><span style="color:red">*</span></td>
                <td><input th:type="text" name="jobName" th:value="*{jobName}"/></td>
            </tr>
            <tr id="classNameTr">
                <td><laber>类路径</laber></td>
                <td><input th:type="text" name="className" th:value="*{className}"/></td>
            </tr>
            <tr id="methodTr">
                <td><laber>方法名</laber></td>
                <td><input th:type="text" name="method" th:value="*{method}"/></td>
            </tr>
            <tr>
                <td><laber>参数(JSON格式)</laber></td>
                <td><input th:type="text" name="params" th:value="*{params}"/></td>
            </tr>
            <tr>
                <td><laber>Cron表达式</laber></td>
                <td><input th:type="text" name="cron" th:value="*{cron}"/></td>
            </tr>
            <tr>
                <td><laber>有效状态</laber></td>
                <td>
                    <select name="state"/>
                    <option id="succ" value="1">有效</option>
                    <option id="fail" value="0">无效</option>
                    </select>
                </td>
            </tr>
<!--            <tr>
                <td><laber>邮件模板编码</laber></td>
                <td><input th:type="text" name="mailTmpCode" th:value="*{mailTmpCode}"/></td>
            </tr>-->
            <tr>
                <td><laber>GLUE类型</laber></td>
                <td>
                    <select name="glueType" onchange="glueTypeChange(this);">
                        <option id="noGlue" value=""></option>
                        <option id="classPath" value="CLASS">类全名</option>
                        <option id="bean" value="BEAN">BEAN</option>
                        <option id="glueGroovy" value="GLUE_GROOVY" default>GLUE_JAVA</option>
                    </select>
                </td>
            </tr>
            <tr id="beanNameTr">
                <td><laber>Bean名称</laber></td>
                <td><input th:type="text" name="beanName" th:value="*{beanName}"/></td>
            </tr>
            <tr id="glueCodeTr">
                <td colspan="2">
                    <p>GLUE_JAVA脚本，需实现com.hhf.rpa.handler.ScriptHandler接口</p>
                    <div>
                        <textarea th:type="text" name="glueCode" id="glueCode" th:text="*{glueCode}"/>
                    </div>
                    <div>
                        <laber>语言模式切换</laber>
                        <select name="mode" id="mode" onchange="selectMode()">
                            <option id="java" value="text/x-java">java</option>
                            <option id="groovy" value="groovy">groovy</option>
                            <option id="xml" value="xml">xml</option>
                            <option id="sql" value="text/x-sql">sql</option>
                        </select>
                        <laber>主题切换</laber>
                        <select name="theme" id="theme" onchange="selectTheme()">
                            <option id="eclipse" value="eclipse">eclipse</option>
                            <option id="dracula" value="dracula">dracula</option>
                            <option id="3024-day" value="3024-day">3024-day</option>
                            <option id="3024-night" value="3024-night">3024-night</option>
                            <option id="monokai" value="monokai">monokai</option>
                            <option id="xq-light" value="xq-light">xq-light</option>

                            <option id="abbott" value="abbott">abbott</option>
                            <option id="abcdef" value="abcdef">abcdef</option>
                            <option id="ambiance" value="ambiance">ambiance</option>
                            <option id="ayu-dark" value="ayu-dark">ayu-dark</option>
                            <option id="ayu-mirage" value="ayu-mirage">ayu-mirage</option>
                            <option id="base16-dark" value="base16-dark">base16-dark</option>
                            <option id="base16-light" value="base16-light">base16-light</option>
                        </select>
                        <laber>字体切换</laber>
                        <select name="fontSizeChange" id="fontSizeChange" onchange="selectFont()">
                            <option id="a" value="12px">12</option>
                            <option id="b" value="13px">13</option>
                            <option id="c" value="14px">14</option>
                            <option id="d" value="15px">15</option>
                            <option id="e" value="16px" selected="true">16</option>
                        </select>
                    </div>
                </td>
            </tr>
        </table>
        <button th:type="submit">保存</button>
    </div>
</form>
</body>
</html>

<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var themeInput = document.getElementById("theme");
    var modeInput = document.getElementById("mode");
    var fontSizeInput = document.getElementById("fontSizeChange");

    document.addEventListener('DOMContentLoaded', function(){
            var succ = document.getElementById("succ");
            var fail = document.getElementById("fail");
            var classPath = document.getElementById("classPath");
            var bean = document.getElementById("bean");
            var glueGroovy = document.getElementById("glueGroovy");
            var noGlue = document.getElementById("noGlue");
            var glueType = [[${job.glueType}]];

            var i = [[${job.state}]];
            if (i == 1) {
                succ.selected = true;
            } else {
                fail.selected = true;
            }
            if(glueType == 'CLASS') {
                classPath.selected = true;
            } else if(glueType == 'BEAN') {
                bean.selected = true;
            } else if (glueType == 'GLUE_GROOVY') {
                glueGroovy.selected = true;
                toggleDisplay("classNameTr",0);
                toggleDisplay("methodTr",0);
                toggleDisplay("beanNameTr",0);
            } else {
                noGlue.selected = true;
            }
        },
        false);

        function glueTypeChange(selectElement) {
            // 获取select元素
            var selectedValue = selectElement.value;
            // 根据选中的值执行不同的操作
            switch (selectedValue) {
                case 'CLASS':
                    toggleDisplay("classNameTr",1);
                    toggleDisplay("methodTr",1);
                    toggleDisplay("beanNameTr",0);
                    toggleDisplay("glueCodeTr",0);
                    break;
                case 'BEAN':
                    toggleDisplay("classNameTr",0);
                    toggleDisplay("methodTr",0);
                    toggleDisplay("beanNameTr",1);
                    toggleDisplay("glueCodeTr",0);
                    break;
                case 'GLUE_GROOVY':
                    toggleDisplay("classNameTr",0);
                    toggleDisplay("methodTr",0);
                    toggleDisplay("beanNameTr",0);
                    toggleDisplay("glueCodeTr",1);
                    break;
                default:
                    break;
            }
        }

        function toggleDisplay(elementId, state) {
            var element = document.getElementById(elementId);
            if (state == 1 && (element.style.display === 'none' || element.style.display === '')) {
                element.style.display = 'table-row'; // 显示元素
            } else if(state == 0){
                element.style.display = 'none'; // 隐藏元素
            }
        }

        var glueCode = CodeMirror.fromTextArea(document.getElementById("glueCode"), {
            // mode: "xml",               //默认语言模式：xml代码高亮
            // mode: "text/x-sql",     //sql代码高亮
            mode: "text/x-java",
            indentWithTabs: true,
            smartIndent: true,
            lineNumbers: true,    //显示行号
            matchBrackets : true, //括号匹配
            autofocus: true,
            theme: "eclipse",	//设置主题
            lineWrapping: true,	//代码折叠
            extraKeys: {        // 自动补全
                "Ctrl-Space": "autocomplete"
            },
            autoCloseBrackets: true,
            foldGutter: true,
            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
        });
        glueCode.setSize('auto','80em');   //设置编辑器高度

        function selectTheme() {
            var themeValue = themeInput.options[themeInput.selectedIndex].textContent;//获取下拉框的内容
            glueCode.setOption("theme", themeValue);//把内容设置为主题色，
        }

        function selectMode() {
            var modeValue = modeInput.options[modeInput.selectedIndex].textContent;//获取下拉框的内容
            glueCode.setOption("mode", modeValue);//把内容设置为主题色，
        }

        function selectFont() {
            var fontSize = fontSizeInput.options[fontSizeInput.selectedIndex].value;//获取下拉框的内容
            var fontSizeStr = "font-size:"+fontSize;
            glueCode.markText({line:0,ch:0},{line:999,ch:999},{css:fontSizeStr});
        }
    /*]]>*/
</script>
